<template>
  <div>
    <div ref="pieChartContainer" style="width: 400px; height: 400px;"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps, defineEmits, watch } from 'vue'
import * as echarts from 'echarts'
import { dayjs } from "element-plus"
const props = defineProps(['coundata', 'title'])
const pieChartContainer = ref(null)
let pieChart = null
const cchaerdata = ref([...props.coundata])
// const emit = defineEmits(['initInventoryStatusChart'])
const isinit = ref(false)


const initInventoryStatusChart = () => {
  let tadata = {
    xtable: [],
    ytable: [],
  }
  cchaerdata.value.forEach(element => {
    if (props.title == '车辆') {
      tadata.xtable.push(dayjs(element.date_time).format('MMDD'))
      tadata.ytable.push(element.totalcount)
    } else if (props.title == '应急') {
      if (element.month === undefined) {
        tadata.xtable.push(element.year)
      } else {

        tadata.xtable.push(element.year + '/' + element.month)
      }
      tadata.ytable.push(element.count)
    } else {
      tadata.xtable.push(dayjs(element.date_time).format('YYMM'))
      tadata.ytable.push(element.event_count)
    }
  })

  if (isinit.value == false) {
    pieChart = echarts.init(pieChartContainer.value)
  }
  console.log(tadata)
  const pieOption = {
    // legend: {
    //   data: ['化工园区A', '化工园区B', '化工园区C']
    // },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: tadata.xtable
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: tadata.ytable,
        type: 'bar'
      }
    ]
  }
  pieChart.setOption(pieOption)
}
const formatDateTimess = (dateTimeString, str) => {
  if (!dateTimeString) return null
  if (str != 'date') {
    const date = dayjs(dateTimeString).format('YYYY-MM-DD HH:mm:ss')
    return date
  } else {
    const date = dayjs(dateTimeString).format('YYYY-MM-DD')
    return date
  }

}
onMounted(() => {
  initInventoryStatusChart()
})
watch(() => props.coundata, (val) => {
  cchaerdata.value = val
  isinit.value = true


  initInventoryStatusChart()
}) 
</script>

<style lang="scss" scoped>
</style>
